Day 6｜Checkbox、Radio、Switch：三個看起來像，意思完全不同

安安～我是ChiYu～

昨天才把帳號、密碼、搜尋與備註送回各自的輸入元件，我繼續往下填邀請表單，AI 又替我準備了一排整整齊齊的開關。

圖 1：和昨天結尾是同一個 AI 第一版。通知頻率的三個答案可以同時開啟，卻又看不出哪些設定已經生效。

Email、站內通知、通知頻率，連「邀請後立即啟用」都長得一樣。畫面很有設定頁的樣子，至於可以選幾個、是否立刻生效，畫面選擇保持沉默。

這個差別不能等到使用者點完才揭曉。假設我關掉「每週摘要」後直接離開頁面：它若是 Switch，我會認為設定已經寫入；它若是 Checkbox，而且下面還有一顆儲存按鈕，那我剛才只是在修改尚未送出的表單值。

外觀只差一小塊，操作承諾差很多。

圖 2：比較頁先問能選幾個、何時生效，再決定 Checkbox、Radio 或 Switch。造型是否現代，還輪不到它回答。

先回答「能選幾個」和「何時生效」，元件就少猜一半

我會先把設定變更寫成一小段時間線。使用者做了什麼、資料在哪一刻成立，這兩件事比開關要圓還是要方更值得先決定。

所以我在選元件前只先問兩題：這些選項能不能同時成立？點完之後，還要不要再按一次儲存？

第一題會把 Checkbox 和 Radio 分開，第二題則把 Switch 從一般表單選項裡拉出來。Toggle Button 與 Segmented Control 看起來也有選取狀態，但它們處理的是工具或檢視，不是通知表單值。

Checkbox 可以多選，2／3 時還要說出「只選了一部分」

Checkbox｜核取方塊 適合彼此獨立、可以同時成立的選項。LumenDesk 的 Email、站內通知與每週摘要能各自勾選，最後再和整份設定一起儲存，所以我保留 Checkbox。

圖 3：Email 與每週摘要已勾選、站內通知未勾選；上方「全選通知管道」顯示部分選取與已選 2／3。

我打開 Demo 時，三個子項目已經選了兩個。最上方的「全選通知管道」既不能顯示已全選，也不能假裝完全沒選；它需要中間狀態，旁邊的 2／3 則把目前資料說得更直接。

接著我按下全選，三個子項目全部勾選，計數更新成 3／3。

部分選取不是 Checkbox 一時猶豫，它在表達父項與子項的資料關係。Vibe Coding 若只寫「做三個通知開關」，AI 很可能漏掉這層關係；我會明確補上能否多選、是否一起儲存，以及全選如何反映子項目。

Radio 讓同一組只留一個答案，圓形只是外觀

Radio｜單選按鈕 用在彼此互斥的選項。通知頻率只能是即時、每日摘要或每週摘要其中一種；選了新的答案，原本的答案就得取消。

圖 4：Radio Group 只保留一種通知頻率，群組名稱也持續說明這一題正在選什麼。

Radio 最容易被當成「圓形 Checkbox」。資料模型才不管它圓不圓：Checkbox 能留下多個布林值，Radio Group 在同一組裡只能留下單一答案。

付款方式、配送速度或通知頻率都很適合 Radio，只要選項數量不至於把整頁撐爆。群組要有可見名稱，選項文字也得能單獨理解。需求如果允許複選，就不要因為偏愛圓形硬塞 Radio，資料最後只會默默吃掉其他答案。

Switch 一切換就代表設定成立，失敗時不能裝沒事

Switch｜切換開關 適合單一設定的即時開／關，例如「啟用登入通知」或「允許公開個人頁」。使用者切換後，系統要立刻回饋儲存結果。

圖 5：Switch 表達目前設定是開或關。切換後還要處理儲存中、成功與失敗回復。

把圓點滑到右邊很簡單，網路失敗後怎麼回復才麻煩。畫面若顯示已開啟，後端卻沒有儲存成功，使用者下次回來看到原值，會以為系統偷偷改了設定。

我會要求切換期間禁止重複操作；儲存失敗時回復原值，並在控制附近說明原因。縮圖移動完成，不能直接當成資料已經寫入的收據。

圖 6：Checkbox 與 Radio 常在調整一組值後統一提交；Switch 則要把即時儲存與失敗回復一起設計。

畫面上出現「儲存」Button，不代表 Switch 一定用錯。問題仍然是規格：Switch 是否已經即時寫入？如果沒有，就別讓外觀暗示它已經生效。

Toggle Button 改變工具模式，不拿來代替表單選項

Toggle Button｜切換按鈕 處理目前工具或操作模式，例如編輯器是否啟用粗體、篩選面板是否展開。

圖 7：Toggle Button 顯示粗體工具目前是否啟用；這是操作模式，不是等待表單提交的資料。

Toggle Button 要清楚呈現目前是否啟用，也需要可辨識名稱。它很適合工具列，不適合「同意條款」或「接收 Email」這種表單資料。那些內容需要 Checkbox 的選取規則，不能只因為 Toggle Button 看起來比較俐落就請它兼差。

Segmented Control 切換少量檢視，不負責提交設定

Segmented Control｜分段控制 適合少量、彼此排他的檢視模式，例如列表、看板與行事曆。資料沒有改變，只是換一種看法。

圖 8：同一批資料在列表與看板間切換，目前所在模式要一眼看得出來。

選項很多、文字很長，或每個答案需要額外說明時，Radio Group 會比較容易讀。Segmented Control 應該保持精簡，否則每個選項都想擠進同一排，最後只剩縮字和猜圖示兩條路。

五種元件可以在 Checkbox、Radio、Switch 完整比較頁 一起核對。比較頁先處理資料規則，再導向各元件 Demo，不用靠控制項長得像哪一套設計系統來選。

改寫 Prompt：把變更何時成立直接交代給 AI

原本那句「全部放成開關」沒有說資料規則。我把通知管道、通知頻率與立即生效拆開後，Prompt 會這樣寫：

為帳號設定頁建立三種控制：
- 「通知管道」使用 Checkbox 群組，可同時選 Email、站內通知與每週摘要；提供「全選」控制，部分選取時要顯示中間狀態與已選數量。
- 「通知頻率」使用 Radio 群組，只能在即時、每日摘要、每週摘要中選一個，保留可見群組名稱。
- 「啟用登入通知」使用 Switch。切換後立即儲存；載入中禁止重複切換，失敗時回復原本值並顯示錯誤訊息。
不要用只有圖示的控制取代文字 Label；360px 寬度下，所有選項與訊息都必須可閱讀與操作。

我會用三個相反操作驗收：勾兩個 Checkbox 後取消其中一個，換一個 Radio 選項確認舊值被取消，再讓 Switch 的即時儲存失敗。只測預設畫面太輕鬆，這些反向操作才看得出資料規則有沒有真的做進去。

通知設定分工完成，最後一個 Dropdown 又把規則攪在一起

修改後，Email 與站內通知可以同時成立，所以使用 Checkbox；通知頻率只能保留一個答案，交給 Radio；會立即改變工作區設定的項目才使用 Switch。Toggle Button 留在工具模式，Segmented Control 則負責切換資料檢視。

這次畫面沒有多出什麼華麗效果，使用者卻能預測每一次點擊何時生效。對 AI 來說，資料規則也終於不必從開關造型裡通靈。

邀請流程剩下「所屬部門」和「協作者」兩個欄位。部門要能搜尋，但只能選一筆既有資料；協作者同樣要搜尋，卻可以保留多筆結果。AI 把它們都叫 Dropdown，前面好不容易拆清楚的規則又準備混成一鍋。

先看「所屬部門」的第一版。它能輸入，也真的會掉出一張清單；至於這段文字最後算搜尋條件、新部門名稱，還是已完成的選取，畫面沒有打算多說。

圖 9：輸入「研究」後出現「研究組」，但 Label、既有值限制、選取結果與鍵盤規則都沒有交代。

明天，我們就來拆這個什麼都能裝、也因此什麼都沒說清楚的「下拉選單」。

參考資料與查閱日期

• W3C WAI：Checkbox Pattern
• W3C WAI：Radio Group Pattern
• W3C WAI：Switch Pattern

資料查閱：2026-07-31。